<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
	<link rel="stylesheet" href="__INDEX__/css/style.css" />
	<link rel="stylesheet" href="__INDEX__/css/mall.css" />	
	<style type="text/css">
		.payment_erweima canvas{width: 150px; height: 150px;}
		@media only screen and (min-width: 321px){.payment_erweima canvas,.payment_erweima{width: 180px; height: 180px;}.sherweimabox{width: 200px; height: 200px;}}
		@media only screen and (min-width: 381px){.payment_erweima canvas,.payment_erweima{width: 210px; height: 210px;}.sherweimabox{width: 230px; height: 230px;}}
		@media only screen and (width: 384px){.payment_erweima canvas,.payment_erweima{width: 190px; height: 190px;}.sherweimabox{width: 210px; height: 210px;}}
		@media only screen and (min-width: 600px){.payment_erweima canvas,.payment_erweima{width: 310px; height: 310px;}.sherweimabox{width: 330px; height: 330px;}}
		.payment_content{padding-bottom: 0;}
		body{background: white;}	
		.down_btn{margin-bottom: 15px;width: 100%; margin: 0 auto; height: 2rem; font-weight: bold; line-height: 2rem; text-align: center; font-size: 1.1rem; background: url(__AGENT__/img/bac_fukuan.jpg) no-repeat; background-size: 100% auto; color: white;}
	</style>
	<!--[if lt IE 9]> 
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
	<![endif]--> 
</head>

<body>
	<div class="down_btn" style="margin-bottom: 15px;">{$agent_info['agent_name']}</div>
	<div class="mui-content payment_content" style="    width: 88%;text-align: center;margin-left: 25px;">
		<div class="payment_conbox" id='payment_conbox'>
			<div class="sherweimabox">
				<div class="payment_erweima"  >
					<div id="qrcode" ></div>
					<img id="code_img" src="" style="display: none;"/>
				</div>
			</div>
		</div>
		<div id ='cut_img'></div>
		<div class="payment_butbox"><img src="__INDEX__/images/bac_fukuan2.jpg"></div>
	</div>
</body>
</html>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/layui/layui.all.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.qrcode.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/utf.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/zepto-1.1.6.min.js"></script>
<script type="text/javascript" src='__PUBLIC__/static/js/html2canvas.js'></script>
<script>
	var index = layer.load(0, {shade: false,time: 1.5 * 1000});
	$(".layui-layer-loading").css("left", "50%");
	var url = "{$code_url}";
	 $("#qrcode").qrcode({
        render 		: "canvas",    		//设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
        text 		: url,    		//扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
        width 		: "250",    	//二维码的宽度
        height 		: "250",    	//二维码的高度
        background 	: "#ffffff",    //二维码的后景色
        foreground 	: "#000000",    //二维码的前景色
    });
    
    setTimeout(function(){
		html2canvas($("#payment_conbox"), {
			 onrendered: function (canvas) {
			     var url = canvas.toDataURL(); //base64数据
			     var image = new Image();
			     image.src = url;
			     image.id = 'div_img';
			     $('#cut_img').append(image);
			     $("#payment_conbox").hide();
			   }
			});
	},1000);
</script>
